<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<%@include file="../common_head.jsp" %>

	<script type="text/javascript" charset="utf-8">
      $(function() {
          $("img.scrollLoading").lazyload({effect: "fadeIn",threshold :300});  
          $(".scrollLoading1 img").lazyload({effect: "fadeIn"});
      });
    </script>

<body>
 <%@include file="../common_nav.jsp" %>
<!--main-->
<div class="w-1200 margin-0-auto">
	<div class="ogmall_found">
   	  <h1>创建方案</h1>
      <div class="title" style="line-height:46px">选择楼盘：</div>
      <select name="" size="1" class="select" id="community">
          <option value="">---</option>
          <c:forEach items="${communityList }" var="c">
          <option value="${c.id }">${c.name }</option>
          </c:forEach>
      </select>
      
      <div class="blank10"></div><div class="blank10"></div>
      <div class="title">选择户型：</div>
      <div class="choice">
          <ul id="houseType-ul">
            <!-- 
            <li class="on"><img src="img/9.jpg"><p>四室二厅</p></li>
            <li><img src="img/9.jpg"><p>四室二厅</p></li>
            <li><img src="img/9.jpg"><p>四室二厅</p></li>
            <li><img src="img/9.jpg"><p>四室二厅</p></li>
            <li><img src="img/9.jpg"><p>四室二厅</p></li>
             -->
          </ul>
      </div>
      <div class="blank10"></div>
      <div class="title" style="line-height:46px">选择风格：</div>
      <select name="" size="1" class="select" id="houseStyle">
          <option value="">---</option>
          <c:forEach items="${houseStyles }" var="s">
          <option value="${s.id }" data-name="${s.name }">${s.name }</option>
          </c:forEach>
      </select>
      <div class="blank10"></div><div class="blank10"></div>
      <div class="title">&nbsp;</div>
      <div class="choice">
          <ul id="houseStyle-ul">
          </ul>
      </div>
      
      
      <div class="blank10"></div>
      <a href="javascript:void(0);" class="found_btn" onclick="goNext();">下一步</a>
    </div>
</div>
<!--main END-->
<div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
<div class="bottom-warp w-100p">
     <div class="bottom w-1200 margin-0-auto">
       <div class="promise-label">
           <ul>
               <li>
                   <div class="tag-icon icon-you"></div>
                   <h2>优质保障</h2>
                   <p>品质护航 购物无忧</p>
               </li>
               <li>
                   <div class="tag-icon icon-qi"></div>
                   <h2>七天无理由退货</h2>
                   <p>提供售后无忧保障</p>
               </li>
               <li>
                   <div class="tag-icon icon-te"></div>
                   <h2>特色O2O体验</h2>
                   <p>线上浏览 线下体验</p>
               </li>
               <li>
                   <div class="tag-icon icon-zhun"></div>
                   <h2>准时送达</h2>
                   <p>一诺千金 准时准点</p>
               </li>
           </ul>
       </div>   
       <div class="help-box">
           <div class="callme">
               <h2>服务热线</h2>
               <p>0717-6971101</p>
               <a href="#">用户反馈</a>
           </div>
           <div class="help-list">
               <dl>
                   <dt>达达质检</dt>
                   <dd><a href="#">购物流程</a></dd>
                   <dd><a href="#">支付方式</a></dd>
                   <dd><a href="#">发票制度</a></dd>
               </dl>
               <dl>
                   <dt>服务保障</dt>
                   <dd><a href="#">100%正品</a></dd>
                   <dd><a href="#">免费送货</a></dd>
                   <dd><a href="#">七天退换</a></dd>
               </dl>
               <dl>
                   <dt>配送方式</dt>
                   <dd><a href="#">物流配送</a></dd>
                   <dd><a href="#">安装说明</a></dd>
                   <dd><a href="#">收货指南</a></dd>
               </dl>
               <dl>
                   <dt>售后服务</dt>
                   <dd><a href="#">退换货政策</a></dd>
                   <dd><a href="#">退换货流程</a></dd>
               </dl>
               <dl>
                   <dt>关于我们</dt>
                   <dd><a href="#">公司简介</a></dd>
                   <dd><a href="#">联系我们</a></dd>
                   <dd><a href="#">招商合作</a></dd>
               </dl>
           </div>
           <div class="download">
               <p>手机达达</p>
               <img src="./img/other/qcode.jpg">
           </div>
       </div>  
     </div>
</div><div class="copyright-warp w-100p">
    <div class="copyright">
        <p>Copyright © 2016 ycoggj.com 长沙立民网络科技有限公司 版权所有</p>
    </div>
</div>
<script type="text/javascript" src="${ctx}/js/plugins.js"></script>
<script type="text/javascript" src="${ctx}/js/modules.js"></script>
<script type="text/javascript" src="${ctx}/js/common.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
	init();
});

var houseTypeId = '';
var houseStyleImage = '';
function init() {
	$(".choice li").click(function(){
		$(this).addClass("on").siblings().removeClass("on");
		//tola();
		if ($(this).attr('data-type') == 'houseType') {
			houseTypeId = $(this).attr('data-value');
		}
		if ($(this).attr('data-type') == 'houseStyle') {
			houseStyleImage = $(this).attr('data-value');
		}
	});
}

$('#community').change(function() {
	var id = $(this).val();
	if (id == '') {
		return;
	}
	$.ajax({
		url: "${ctx}/design/getHouseType",
		data: {
			id: id
		},
		dataType: "json",
		success: function(data) {
			$('#houseType-ul').empty();
			for (var i = 0; i < data.data.length; i++) {
				var li = '<li data-type="houseType" data-value="' + data.data[i].houseTypeId + '"><img src="' + data.data[i].image + '"><p>' + data.data[i].name + '</p></li>';
				$('#houseType-ul').append(li);
			}
			init();
		}
	});
});

$('#houseStyle').change(function() {
	var id = $(this).val();
	if (id == '') {
		return;
	}
	$.ajax({
		url: "${ctx}/design/getHouseStyleImages",
		data: {
			id: id
		},
		dataType: "json",
		success: function(data) {
			$('#houseStyle-ul').empty();
			for (var i = 0; i < data.data.length; i++) {
				var li = '<li data-type="houseStyle" data-value="' + data.data[i].image + '"><img src="' + data.data[i].image + '"><h2>' + data.data[i].name + '</h2></li>';
				$('#houseStyle-ul').append(li);
			}
			init();
		}
	});
});

// 下一步
function goNext() {
	var communityId = $('#community').val();
	var houseStyleId = $('#houseStyle').val();
	if (communityId == '') {
		error("请选择楼盘");
		return;
	}
	if (houseTypeId == '') {
		error("请选择户型");
		return;
	}
	if (houseStyleId == '' || houseStyleImage == '') {
		error("请选择风格图片");
		return;
	}
	location = '${ctx}/design/online2?communityId=' + communityId + "&houseTypeId=" + houseTypeId + "&houseStyleId=" + houseStyleId + "&houseStyleImage=" + houseStyleImage;
}
</script>

</body>
</html>
